<template>
  <page-search
    :search-config="searchConfig"
    @queryClick="handleQueryClick"
    @resetClick="handleResetClick"
  />

  <page-content
    ref="contentRef"
    :content-config="contentConfig"
    @edit-click="handleEditClick"
    @new-click="handleNewClick"
  >
    <template #status="scope">
      <el-tag
        class="tag_status"
        effect="plain"
        size="default"
        @click="handleStatusClick(scope.row)"
        :type="scope.row[scope.prop] == '1' ? 'primary' : 'danger'"
        >{{ scope.row[scope.prop] == '1' ? '启用' : '禁用' }}</el-tag
      >
    </template>
  </page-content>

  <page-modal :modal-config="modalConfig" ref="modalRef" />
</template>

<script setup lang="ts">
// 模块引入
//import { ref } from 'vue'
import PageSearch from '@/components/page/search/index.vue'
import PageContent from '@/components/page/content/index.vue'
import PageModal from '@/components/page/modal/index.vue'
// 配置引入
import { searchConfig, contentConfig, modalConfig } from './config'
import { usePageContent, usePageModal } from '@/components/hooks'

import useSystemStore from '@/store/main/system/system'

const { contentRef, handleQueryClick, handleResetClick } = usePageContent()
const { handleEditClick, handleNewClick, modalRef } = usePageModal()
// console.log(modalRef)

defineOptions({
  // 组件名称
  name: 'Company',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

const systemStore = useSystemStore()
const { pageName, category } = contentConfig
const page = `${category}/${pageName}`
/** 更改状态，禁用或启用  */
function handleStatusClick(row: any) {
  const { _id, status } = row
  const flag = !status
  // console.log(_id, flag)
  systemStore.updatePageAction(page, _id, { status: flag })
}
</script>

<style scoped lang="scss">
.tag_status {
  cursor: pointer;
}
</style>
